<template>
    <div @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :class="{onStop :fixedflag}" >
        <ShopHeader @dontMove="fixedflagf"></ShopHeader><!---->
        <div class="tab">
            <div class="tab_item">
                <!--<router-link :to='"/shop/"+this.$route.params.id+"/goods"' class="link" :class="{on: `/shop/${this.$route.params.id}/goods`===$route.path}">点餐</router-link>-->
                <router-link :to='"/shop/"+this.$route.params.id+"/goods"' class="link" :class="{on: `/shop/${this.$route.params.id}/goods`===$route.path}">点餐</router-link>
            </div>
            <div class="tab_item">
                <router-link :to='"/shop/"+this.$route.params.id+"/rating"' class="link" :class="{on: `/shop/${this.$route.params.id}/rating`===$route.path}">评论</router-link>
            </div>
            <div class="tab_item">
                <router-link :to='"/shop/"+this.$route.params.id+"/info"' class="link" :class="{on: `/shop/${this.$route.params.id}/info`===$route.path}">信息</router-link>
            </div>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>

    </div>

</template>

<script>
    import ShopHeader from '../../components/ShopHeader/ShopHeader.vue'
    export default {
        name: "Shop",
        data(){
            return {
                startPoint:0,
                isMove:false,
                distance:0,
                fixedflag:false
            }
        },
        methods:{
            fixedflagf(flag){
                this.fixedflag=flag
            },
            touchStart(e){
                this.startPoint=e.touches[0].clientX
            },
            touchMove(e){
                this.isMove=true;
                this.distance= e.touches[0].clientX-this.startPoint;
                //console.log(e.touches[0].clientX)
            },
            touchEnd(e){
              //  console.log(this.distance);
                if(this.isMove){

                    if(this.distance>200){
                        console.log("向右监听滑动成功");
                        this.$router.replace('/msite')
                    }
                }
                this.isMove=false;
                this.startPoint=0;
                this.distance=0
            }
        },
        components:{
            ShopHeader
        },
        mounted(){
           //this.$store.dispatch('getShopGoods');
           this.$store.dispatch('getShopInfo');
           // this.$store.dispatch('getShopRatings')
            console.log(this.$route.path,this.$route.params.id)
        }
    }
</script>

<style lang="stylus" scoped>

.tab
    width:100%
    box-sizing:border-box
    padding:0 10%
    display:flex
    //background:blue
    .tab_item
        flex:1
        height:1rem
        text-align:center
        font-size:0.35rem
        .link
            line-height:0.8rem
            display:inline-block
            &.on
                border-bottom:1px solid green
                color:gold

.onStop
    position:fixed
    width: 100%
    height:100%
</style>
